/* eslint-disable */
<template>
<!--  <div>-->
<!--    <div class="box">-->
<!--      <button class="backBtn" @click="back()">返回上级</button>-->
<!--      <div class="content">-->
<!--&lt;!&ndash;        <div id="mapChart" class="chart"></div>&ndash;&gt;-->
<!--&lt;!&ndash;        <div class="right"></div>&ndash;&gt;-->
<!--      </div>-->

<!--    </div>-->
<!--  </div>-->
  <div class="box">
    <button class="top" @click="back()">返回上级</button>
    <div class="min">
         <div id="mapChart" class="left"></div>
         <div class="item">
                   <table class="table table-bordered table-striped text-center">
                     <thead>
                     <tr>
                       <th>序号</th>
                       <th>地名</th>
                       <th>成功率</th>
                       <th>重新加载</th>
                     </tr>
                     </thead>
                     <tbody>
                     <tr v-for ="(cityname,index) in hashMap1.keySet()">
                       <td>{{index}}</td>
                       <td>{{cityname}}</td>
                       <td>{{hashMap1.get(cityname)}}</td>
                       <td> <button @click="refleshCity(cityname)">刷新</button> </td>
                     </tr>
                     </tbody>
                   </table>
        </div>
    </div>
  </div>

</template>

<script>
import cityMap from '../model/china-main-city-map.js'
import * as echarts from 'echarts'
import axios from 'axios'
import Vue from 'vue'
// import registerAndsetOption from '@/js/echarts-map'

// 中国地图（第一级地图）的ID、Name、Json数据
var chinaId = 100000
var chinaName = 'china'
var chinaJson = null

// 记录父级ID、Name
var mapStack = []
var parentId = null
var parentName = null
var hashMap = new HashMap()
var tempid = null
// eslint-disable-next-line no-unused-vars
var tempName = null
var tempJson = null
var tempFlag = false

// Echarts地图全局变量，主要是在返回上级地图的方法中会用到
var myChart = null
export default {
  name: 'ChinaMap',
  props: {
    msg: String
  },
  data: function () {
    return {
      hashMap1: new HashMap()
    }
  },
  mounted: function () {
    this.mapChart('mapChart')
  },
  methods: {
    /**
     * 返回上一级地图
     */
    back () {
      console.log(mapStack.length)
      if (mapStack.length != 0) {
        // 如果有上级目录则执行
        var map = mapStack.pop()
        axios
          .get('./static/json/map/' + map.mapId + '.json', {})
          .then(response => {
            const mapJson = response.data
            this.registerAndsetOptionFirstNet(
              myChart,
              map.mapId,
              map.mapName,
              mapJson,
              false
            )
            // 返回上一级后，父级的ID、Name随之改变
            parentId = map.mapId
            parentName = map.mapName
          })
      }
    },
    /**
     * Echarts地图
     */
    mapChart (divid) {
      axios.get('./static/json/map/' + chinaId + '.json', {}).then(response => {
        const mapJson = response.data
        chinaJson = mapJson
        myChart = echarts.init(document.getElementById(divid))
        this.registerAndsetOptionFirstNet(myChart, chinaId, chinaName, mapJson, false)
        parentId = chinaId
        parentName = 'china'
        var that=this
        myChart.on('click', function (param) {
          console.log("进来下一页")
          var cityId = cityMap[param.name]
          if (cityId) {
            // 代表有下级地图
            axios
              .get('./static/json/map/' + cityId + '.json', {})
              .then(response => {
                const mapJson = response.data
                that.registerAndsetOptionFirstNet(
                  myChart,
                  cityId,
                  param.name,
                  mapJson,
                  true
                )
              })
          } else {
            // 没有下级地图，回到一级中国地图，并将mapStack清空
            this.registerAndsetOptionFirstNet(myChart, chinaId, chinaName, chinaJson, false)
            mapStack = []
            parentId = chinaId
            parentName = chinaName
          }
        })
      })
    },
    registerAndsetOptionFirstNet (myChart, id, name, mapJson, flag) {
      tempid = id
      tempName = name
      tempJson = mapJson
      tempFlag = flag
      hashMap.clear()
      for (var i = 0; i < mapJson.features.length; i++) {
        hashMap.put(mapJson.features[i].properties.name, Math.ceil(Math.random() * 100))
      }
      this.hashMap1 = hashMap
      // 加载表格
      this.$forceUpdate()
      this.registerAndsetOption(myChart, id, name, mapJson, flag)
    },
    /**
     *
     * @param {*} myChart
     * @param {*} id        省市县Id
     * @param {*} name      省市县名称
     * @param {*} mapJson   地图Json数据
     * @param {*} flag      是否往mapStack里添加parentId，parentName
     */
    registerAndsetOption (myChart, id, name, mapJson, flag) {
      echarts.registerMap(name, mapJson)
      myChart.setOption({
        tooltip: {
          formatter (value) {
            return value.data.name.concat(',数值：').concat(value.data.value)
          },
          show: true
        },
        visualMap: { // 地图图例
          show: false,
          left: 26,
          bottom: 40,
          showLabel: true,
          pieces: [ // 根据数据大小，各省显示不同颜色
            {
              gte: 10,
              lt: 99,
              label: '66- 100',
              color: '#9face7'
            },
            {
              gte: 10,
              lt: 99,
              label: '33 - 65',
              color: '#9aac77'
            },
            {
              lt: 10,
              label: '<33',
              color: '#acf51e'
            }
          ]
        },
        series: [
          {
            type: 'map',
            map: name,
            label: {
              normal: {
                show: true,
                fontSize: '14'
              }
            },
            itemStyle: {
              normal: {
                borderWidth: 1
              },
              emphasis: { // 当鼠标放上去  地区区域是否显示名称
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                borderWidth: 0
              }
            },
            data: this.initMapData(mapJson)
          }
        ]
      })

      if (flag) {
        // 往mapStack里添加parentId，parentName,返回上一级使用
        mapStack.push({
          mapId: parentId,
          mapName: parentName
        })
        parentId = id
        parentName = name
      }
    },

    initMapData (mapJson) {
      var mapData = []
      for (var i = 0; i < mapJson.features.length; i++) {
        var nameStr = mapJson.features[i].properties.name
        var valueStr = this.hashMap1.get(nameStr) == null ? 0 : this.hashMap1.get(nameStr)
        console.log(nameStr + ':' + valueStr)
        mapData.push({
          name: nameStr,
          value: valueStr
          // id:mapJson.features[i].id
        })
      }
      return mapData
    },

    refleshCity (cityName) {
      myChart.showLoading()
      // 网络请求修改
      hashMap.put(cityName, 100)
      this.hashMap1 = hashMap
      this.$forceUpdate()
      this.registerAndsetOption(myChart, tempid, tempName, tempJson, tempFlag)
      myChart.hideLoading()
    }
  }

}

function HashMap () {
  // 定义长度
  var length = 0
  // 创建一个对象
  var obj = new Object()

  /**
   * 判断Map是否为空
   */
  this.isEmpty = function () {
    return length == 0
  }

  /**
   * 判断对象中是否包含给定Key
   */
  this.containsKey = function (key) {
    return (key in obj)
  }

  /**
   * 判断对象中是否包含给定的Value
   */
  this.containsValue = function (value) {
    for (var key in obj) {
      if (obj[key] == value) {
        return true
      }
    }
    return false
  }

  /**
   *向map中添加数据
   */
  this.put = function (key, value) {
    if (!this.containsKey(key)) {
      length++
    }
    obj[key] = value
  }

  /**
   * 根据给定的Key获得Value
   */
  this.get = function (key) {
    return this.containsKey(key) ? obj[key] : null
  }

  /**
   * 根据给定的Key删除一个值
   */
  this.remove = function (key) {
    if (this.containsKey(key) && (delete obj[key])) {
      length--
    }
  }

  /**
   * 获得Map中的所有Value
   */
  this.values = function () {
    var _values = new Array()
    for (var key in obj) {
      _values.push(obj[key])
    }
    return _values
  }

  /**
   * 获得Map中的所有Key
   */
  this.keySet = function () {
    var _keys = new Array()
    for (var key in obj) {
      _keys.push(key)
    }
    return _keys
  }

  /**
   * 获得Map的长度
   */
  this.size = function () {
    return length
  }

  /**
   * 清空Map
   */
  this.clear = function () {
    length = 0
    obj = new Object()
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>
.box{
  height: 100vh;
  display:flex;
  flex-direction:column;
}
.top{
  height:50px;
  width:100%;
}
.min{
  display:flex;
  height: 100vh;
  align-items:center;
}
.left{
 flex: 1;
  height: 100vh;
  line-height:30px;
}
.item{
  height: 100vh;
  width:400px;
  line-height:40px;
}
</style>
